<template>
  <div class="selector">
    <template v-if="mode === 'checkbox'">
      <span :class="checkboxClasses">
        <i class="checkbox-inner"></i>
        <input
          type="checkbox"
          class="checkbox-input"
         :checked="value"
         :disabled="disabled"
          @change="onChanged"
        />
      </span>
    </template>
    <template v-if="mode === 'radio'">
      <span class="radio">
        <span :class="radioClasses">
          <i class="radio-inner"></i>
          <input
            type="radio"
            class="radio-input"
           :checked="value"
           :disabled="disabled"
            @change="onChanged"
          />
        </span>
      </span>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'checkbox' // 'radio' | checkbox
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    checkboxClasses() {
      return ['checkbox', {'checkbox--checked': this.value, 'checkbox--disabled': this.disabled}]
    },
    radioClasses() {
      return ['radio', {'radio--checked': this.value, 'radio--disabled': this.disabled}]
    }
  },

  methods: {
    onChanged(ev) {
      if (this.disabled) return;

      this.$emit('update:value', ev.target.checked);
    }
  }
}
</script>

<style lang="scss" scoped>
.selector {
  font-size: 0;

  * {
    box-sizing: border-box;
  }

  [type=checkbox],
  [type=radio] {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  .checkbox,
  .radio {
    position: relative;
    display: inline-block;
    cursor: pointer;

    .checkbox-input,
    .radio-input {
      height: 100%;
      width: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      top: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }
  }

  .checkbox {
    .checkbox-inner {
      display: inline-block;
      height: 16px;
      width: 16px;
      background-color: #FFF;
      border: 1px solid #DCDEE2;
      border-radius: 2px;
      transition: border-color .2s ease-in-out, background-color .2s ease-in-out;

      &::after {
        content: "";
        display: table;
        height: 8px;
        width: 4px;
        position: absolute;
        left: 4px;
        top: 1px;
        border-style: solid;
        border-color: #FFF;
        border-width: 0 2px 2px 0;
        box-sizing: content-box;
        transform: rotate(45deg) scale(0);
        transition: all .2s ease-in-out;
      }
    }
  }
  .checkbox--checked {
    .checkbox-inner {
      background-color: #2D8CF0;
      border-color: #2D8CF0;

      &::after {
        left: 4.5px;
        top: 1px;
        transform: rotate(45deg) scale(1);
        transition: all .2s ease-in-out;
      }
    }
  }

  .radio {
    .radio-inner {
      display: inline-block;
      height: 16px;
      width: 16px;
      background-color: #FFF;
      border: 1px solid #DCDEE2;
      border-radius: 50%;
      transition: all .2s ease-in-out;

      &::after {
        content: "";
        display: table;
        height: 10px;
        width: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -5px 0 0 -5px;
        border-radius: 50%;
        background-color: #2D8CF0;
        opacity: 0;
        transform: scale(0);
        transition: all .2s ease-in-out;
      }
    }
  }
  .radio--checked {
    .radio-inner {
      border-color: #2D8CF0;

      &::after {
        opacity: 1;
        transform: scale(1);
        transition: all .2s ease-in-out;
      }
    }
  }

  .checkbox--disabled,
  .radio--disabled {
    .checkbox-inner,
    .radio-inner {
      background-color: #F3F3F3;
      border-color: #DCDEE2;
    }
    .checkbox-inner::after {
      border-color: #CCC;
    }
    .radio-inner::after {
      background-color: #CCC;
    }

    input {
      cursor: not-allowed !important;
    }
  }
}
</style>